<template>
    <div>
        <div id="box">
            <span class="iconfont icon-jiantou" @click="fn"></span>
        </div>
        <div id="i">
            <img src="../../assets/img/3.png" alt="">
        </div>
  <div id="register">
    
    <van-form @submit="onSubmit">
  <!-- <form  action="http://10.9.70.228:3000/v1/api/reset" method="POST" enctype="multipart/form-data" ref="formreg"> -->
        <!-- 头像上传 -->
      <van-uploader image-fit='cover' :after-read="afterRead" type="file" name="file"/>
       <input type="file" name="file" placeholder="上传头像图片（jpg，png">
     <van-field
        name='name'
        placeholder="用户名"
        v-model="name"
        :rules="[{ required: true, message: '请填写用户名' }]"
        autocomplete="off"
      />
      <van-field
        name='password'
        type="password"
        placeholder="密码"
        v-model="password"
        :rules="[{ required: true, message: '请填写密码' }]"
        autocomplete="off"
      /> 
     <van-button round block type="info" native-type="submit">注册</van-button>
    </van-form>
  </div>
  </div>
</template>


<script>

import Vue from 'vue';
import { Form,Field,Button,Uploader } from 'vant';
import { Dialog } from 'vant';
Vue.use(Form);
Vue.use(Button);
Vue.use(Field);
Vue.use(Uploader)
export default {
    namespaced: true,
  data() {
    return {
      name: "",
      password: "",
      file: {},
    };
  },
  methods: {
    fn(){
        this.$router.push({path:'/center'})
    },
    onSubmit(values) {
      let url = "/api";
      this.$axios.post( "/api/reset", {
        name: this.name,
        password: this.password,
        file: this.file,
     
    }).then(ret=>{
  // setTimeout(() => {
  // }, 5000);
    this.$router.push({path:'../login'})
    });
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.file = file;
    },
  }
};
</script>


<style scoped lang='scss'>
#box{
    width:100%;
    height: 1.17333rem;
    line-height: 1.17333rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}
#i{
    display: block;
    width: 4.26667rem;
    height: 1.34667rem;
    margin: 0.76rem auto 0.90667rem;
    img{
        width:100%;
        height:100%;
    }
}
button{
    height: 1.33333rem;
    line-height: 1.33333rem;
    border-radius: 0.66667rem;
    margin: 1.2rem auto 0.52rem;
    text-align: center;
    font-size: 0.48rem;
    background: linear-gradient(50deg, #ff9a34, #ff4d4a);
    color: #FEFEFE;
    opacity:0.4;
    width:96%;
}
</style>
